<template>
	<view>
		<h4 class="hCss">早教</h4>
		<view class="allBox">
			<template v-for="(item,index) in earlyArr" :key="index">
				<dl-square class="allBox-item" :classTol="item.content" :className="item.titleOne" @change="changeZao(item)" :src="item.iamge"></dl-square>
			</template>				
		</view>	
		<h4 class="hCss">绘本</h4>
		<view class="allBox">
			<template v-for="(item,index) in pictureArr" :key="index">
				<dl-square class="allBox-item" :classTol="'共'+item.num+'课'" :className="item.name" @change="changeHui(item)" :src="item.img"></dl-square>
			</template>				
		</view>	
		<h4 class="hCss">卡通</h4>
		<view class="allBox">
			<template v-for="(item,index) in contentArr" :key="index">
				<dl-square class="allBox-item" :classTol="'共'+item.juji.length+'课'" :className="item.className" @change="changeSque(item)" :src="item.src"></dl-square>
			</template>				
		</view>	
		<h4 class="hCss">儿歌</h4>
		<view class="allBox">
			<template v-for="(item,index) in songArr" :key="index">
				<dl-square class="allBox-item" :classTol="'共'+item.title3+'课'" :className="item.title1" @change="changeEr(item)" :src="item.imgsrc"></dl-square>
			</template>				
		</view>	
		<!-- <view class="allBox">
			<template v-for="(item,index) in allData" :key="index">
				<dl-square class="allBox-item" :classTol="'共'+item.episodes+'课'" :className="item.name" @change="changeSque(item.id)" :src="item.cover"></dl-square>
			</template>				
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// // 早教
				earlyArr: [
					{
						id: 1,
						content: "共11课",
						iamge: "/static/images/lunbo/1.jpg",
						titleOne: "课程名称",
						titleTwo: "推荐语"
					},
					{
						id: 2,
						content: "共11课",
						iamge: "/static/images/lunbo/2.jpg",
						titleOne: "课程名称",
						titleTwo: "推荐语"
					}
				],
				// 绘本
				pictureArr: [
					{
						id:1,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称1',
						msg:'推荐语1'
					},
					{
						id:2,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称2',
						msg:'推荐语2'
					}
				],
				// 卡通
				contentArr: [],
				contentGuoArr: [],
				contentYInArr: [],
				// 儿歌
				songArr: [
					{
						id:1,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					{
						id:2,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					}
				],
				allData: []
			}
		},
		methods: {
			// 所有数据
			// getallData(){
			// 	let that = this;
			// 	let a = uni.getStorageSync('token');
			// 	a =JSON.parse(a);
			// 	console.log(a);
			// 	uni.request({
			// 		url:'http://172.16.123.103:8081/content/showContent',
			// 		method:"POST",
			// 		header:{
			// 			token: a
			// 		},
			// 		success:function(res){
			// 			console.log(res);
			// 			that.allData = res.data.data
			// 			// that.$store.dispatch('getAllSelData',res.data.data)
			// 		},
			// 		fail:function(err){
			// 			console.log(err);
			// 		}
			// 	})
			// },
			// 早教
			changeZao(item){
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/detailPage/detailPage?id='+item.id
				});
			},
			// 绘本
			changeHui(item){
				uni.navigateTo({
					url: '/subpkg/picture-book-detail/picture-book-detail?id='+item.id
				});
			},
			// 卡通
			changeSque(item){
				uni.navigateTo({
					url: '/uni_modules/cartoon-details/components/cartoon-details/cartoon-details?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 儿歌
			changeEr(item){
				uni.navigateTo({
					url: '/uni_modules/song-story-details/components/song-story-details/song-story-details'
				});
			}
		},
		onShow:function(){
			// this.getallData();
			this.contentGuoArr = this.$store.state.cartoonData.classesGuo.slice(0,2);
			this.contentYInArr = this.$store.state.cartoonData.classesYing.slice(0,1);
			this.contentArr = this.contentGuoArr.concat(this.contentYInArr);
		},
	}
</script>

<style scoped>
	.hCss{
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: rgb(245,180,62);
		color: #fff;
		box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
		font-family: '幼圆';
	}
	.allBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;		
	}
	.allBox-item{
		flex-basis: 48%;
		background-color: aliceblue;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
</style>
